<template>
  <el-form ref="form"
    :model="form"
    :rules="creatRules"
    label-width="130px"
    style="height:450px;overflow-y:auto;">
    <el-form-item label="用户id"
      prop="id">
      <el-input v-model="form.id"
        :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="名称"
      prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄"
      prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item label="性别"
      prop="sex">
      <el-input v-model="form.sex"></el-input>
    </el-form-item>
    <el-form-item label="学历"
      prop="education">
      <el-input v-model="form.education"></el-input>
    </el-form-item>
    <el-form-item label="地址"
      prop="address">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item label="电话"
      prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="生日"
      prop="birthday">
      <el-input v-model="form.birthday"></el-input>
    </el-form-item>
    <el-form-item label="身份证"
      prop="idcard">
      <el-input v-model="form.idcard"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
        v-if="sendAppCode !== ''"
        @click="modify('form')">修改</el-button>
      <el-button type="primary"
        v-else
        @click="addNew('form')">新增用户</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { addUser,updateUser,deleteUser,creatProduction, modifyProduction, appCodeList } from "@/api/allApi"; // 引入相应API
export default {
  name: "creatApp",
  data() {
    return {
      form: {
        name: "", // 
        age: "", //
        sex: "",
        education: "",
        address: "", //
        phone: "",
        birthday: "",
        idcard: ""
      },
      creatRules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        age: [
          { required: false, message: "请输入年龄", trigger: "blur" }
        ],
        sex: [
          { required: false, message: "请输入性别", trigger: "blur" }
        ],
        education: [
          { required: false, message: "请输入学历", trigger: "blur" }
        ],
        address: [
          { required: false, message: "请选择住址", trigger: "change" }
        ],
        phone: [{ required: false, message: "请设置手机号码", trigger: "blur" }
        ],
        birthday: [{ required: false, message: "请设置生日日期", trigger: "blur" }
        ],
        idcard: [{ required: false, message: "请设置身份证", trigger: "blur" }
        ]
      }
    };
  },
  props: {
    sendAppCode: ""
  },
  methods: {
    addNew(form) {
      let params = this.form;
      // console.log(params);
      this.$refs[form].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          addUser(params).then(res => {
            if (res.data && res.status == 200) {
              this.$refs[form].resetFields();
              this.$msgbox({
                title: "提示",
                message: "创建成功！",
                callback: () => {
                  location.reload();
                }
              });
            } else {
              this.$message.error("添加失败");
            }
          });
          loading.close();
        } else {
          this.$message.error("请输入完整信息");
        }
      });
    },
    modify(form) {
      let params = this.form;
      // console.log(params);
      this.$refs[form].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          updateUser(params).then(res => {
            if (res.data) {
              this.$refs[form].resetFields();
              this.$msgbox({
                title: "提示",
                message: "修改成功！",
                callback: () => {
                  location.reload();
                }
              });
            } else {
              this.$message.error(res.data.desc);
            }
          });
          loading.close();
        } else {
          this.$message.error("请输入完整信息");
        }
      });
    },
    getThisApi() {
      this.listLoading = true;
      for (let key in this.form) {
        this.form[key] = "";
      }
      if (this.sendAppCode) {
        let param = {
          id: this.sendAppCode
        };
        appCodeList(param).then(res => {
          // console.log(res.data)
          if (res.data.code === 0) {
            let allJson = res.data.data[0];
            this.form = allJson;
            // console.log(this.form)
          } else {
            this.$message({
              message: `[${res.data.desc}]:查询失败`,
              type: "error"
            });
          }
          this.listLoading = false;
        });
      }
    }
  },
  mounted() {
    this.getThisApi();
  },
  watch: {
    sendAppCode() {
      this.getThisApi();
    }
  }
};
</script>

<style lang="less" scoped>
.ctoken {
  color: #409eff;
  cursor: pointer;
}
.ctoken:hover {
  text-decoration: underline;
}
</style>
